<template>
  <Page :total="data.pageTotal"
        class="cus-page mt_20"
  
        :current="data.page"
        :page-size="data.pageSize"
        :show-elevator="showElevator"
        :show-sizer="showSizer"
        :show-total="showTotal"
        :simple="simple"
        transfer
        @on-change="pageChange"
        @on-page-size-change="pageSizeChange"></Page>
</template>

<script>
  export default {
    props: {
      data: {
        page: {
          type: Number,
          default: 1
        },
        pageSize: {
          type: Number,
          default: 20
        },
        pageTotal: {
          type: Number,
        },
      },
      showElevator: {
        type: Boolean,
        default: true,
      },
      showSizer: {
        type: Boolean,
        default: true,
      },
      showTotal: {
        type: Boolean,
        default: true,
      },
      simple: {
        type: Boolean,
        default: false,
      }
    },
    name: "page",
    methods: {
      pageChange(val) {
        this.data.page = val;
        this.$emit('pageChange', val, this.data.pageSize);
      },
      pageSizeChange(val) {
        this.data.pageSize = val;
        // this.$store.commit('updatePageSize', val);
        localStorage.pageSize = val;
        if (this.data.page == 1) {
          this.$emit('pageChange', this.data.page, val);
        }
      }
    },
  }
</script>

<style scoped>

</style>
